<template>
    <div>
        <!-- 共用头部组件 -->
        <common-header
            headerTitle="百领社区"
            :hasBack="false"
        ></common-header>
        <!-- 共用头部组件 -->

        <!-- 共用页面滚动组件 -->
        <common-scroll
            :scrollStyle="scrollStyle"
            :isLoadMore="true"
            :listenScroll="true"
            :data="articalList"
            @pullup="loadMore"
            @scroll="scroll"
        >

            <div class="artical-list">
                <div
                    class="empty-tips"
                    v-if="articalList.length == 0"
                >{{emptyTips}}</div>
                <div
                    class="artical-item"
                    v-for="(items,indexs) of articalList"
                    :key="indexs"
                    @click="goArtical(items.id)"
                >
                    <div class="user-info-box">
                        <div class="user-img-box">
                            <img :src="items.face" />
                        </div>
                        <div class="user-info">
                            <div class="user-name">{{items.nick_name}}</div>
                            <div class="artical-date">{{items.add_time}}</div>
                        </div>
                    </div>
                    <div
                        class="artical-detail-box"
                        v-html="items.content"
                    ></div>
                    <span class="artical-more">查看更多</span>
                    <div
                        class="artical-img-list"
                        v-if="items.imgs.length>0"
                    >
                        <div
                            class="artical-img-item"
                            v-for="(item,index) of items.imgs.slice(0,3)"
                            :key="index"
                        >
                            <img :src="item.title_img" />
                        </div>
                    </div>
                    <div class="artical-info-box">
                        <div class="artical-info-item">
                            <img src="@/assets/images/socialSystem/praise-icon.png" />
                            <span>{{items.praise_total}}</span>
                        </div>
                        <div class="artical-info-item">
                            <img src="@/assets/images/socialSystem/comment-icon.png" />
                            <span>{{items.reply_total}}</span>
                        </div>
                    </div>
                    <div
                        class="comment-box"
                        v-if="items.reply_obj.length>0"
                    >
                        <div
                            class="comment-item"
                            v-for="(item_2,index_2) of items.reply_obj"
                            :key="index_2"
                        >
                            <span class="user-name">{{item_2.nick_name}}：</span>
                            <span class="comment-detail">{{item_2.content}}</span>
                        </div>
                    </div>
                    <!-- <span class="comment-more">查看全部 {{items.reply_obj.length}} 条评论</span> -->
                </div>
            </div>

        </common-scroll>
        <!-- 共用页面滚动组件 -->

        <!-- 分享想法 -->
        <div
            class="share-idea-box"
            v-show="showShareBtn"
            @click="goWrite"
        >
            <img
                class="share-idea-btn"
                src="@/assets/images/socialSystem/share-idea-btn.png"
            />
        </div>
        <!-- 分享想法 -->

        <!-- 共用底部导航栏 -->
        <common-footer nowPage="2"></common-footer>
        <!-- 共用底部导航栏 -->
    </div>
</template>

<script>
import CommonHeader from '@/components/Header'
import CommonFooter from '@/components/Footer'
import CommonScroll from '@/components/Scroll'
export default {
    name: 'SocialSystem',
    components: {
        CommonHeader,
        CommonScroll,
        CommonFooter
    },
    data() {
        return {
            scrollStyle: {
                top: '1.11rem',
                left: '0',
                right: '0',
                bottom: '1.17rem'
            },
            articalList: [],
            scrollHistory: 0,
            showShareBtn: true,
            nowPage: 1,
            totalPage: 1,
            isLoading: false,
            emptyTips: '正在全力加载中...'
        }
    },
    mounted() {
        this.getArticalList()
    },
    methods: {
        getArticalList() {
            this.isLoading = true
            let postData = this.qs.stringify({
                page: this.nowPage,
                page_size: 10
            })
            this.axios.post('/api/moments/tree.json', postData).then(res => {
                const data = res.data
                if (data.status == 1) {
                    if (data.data.list.length == 0) {
                        this.emptyTips = '暂无数据'
                    }
                    this.articalList = this.articalList.concat(data.data.list)
                    this.totalPage = Math.ceil(data.data.page_info.total / 10)
                    this.nowPage++
                    this.isLoading = false
                } else {
                    this.commonDialog.alert('提示', data.msg)
                }
            })
        },
        loadMore() {
            if (this.totalPage >= this.nowPage && this.isLoading == false) {
                this.getArticalList()
            }
        },
        scroll(data) {
            if (this.scrollHistory > data) {
                this.showShareBtn = false
            } else {
                this.showShareBtn = true
            }
            this.scrollHistory = data
        },
        goArtical(id) {
            this.$router.push('/socialSystem/artical?id=' + id)
        },
        goWrite() {
            this.$router.push('/socialSystem/writeArtical')
        }
    }
}
</script>

<style lang="stylus" scoped>
.artical-list
    padding 0.4rem 0.27rem 0.5rem 0.27rem
    .empty-tips
        height 2rem
        line-height 2rem
        text-align center
        font-size 0.33rem
        color #999
    .artical-item
        margin-bottom 0.5rem
        background #fff
        border-radius 5px
        .user-info-box
            display flex
            align-items center
            height 1.33rem
            padding 0 0.4rem
            border-bottom 1px solid #e5e5e5
            .user-img-box
                width 0.8rem
                height 0.8rem
                overflow hidden
                border-radius 100%
                img
                    width 100%
                    height 100%
            .user-info
                flex 1
                margin-left 0.4rem
                .user-name
                    font-size 0.37rem
                    color #333
                .artical-date
                    margin-top 0.13rem
                    font-size 0.32rem
                    color #888
        .artical-detail-box
            padding 0.35rem 0.37rem 0 0.37rem
            font-size 0.37rem
            color #333
            line-height 1.3
            max-height 2.1rem
            overflow hidden
        .artical-more
            padding 0 0.37rem
            line-height 1.06rem
            font-size 0.35rem
            color #3366cc
        .artical-img-list
            display flex
            justify-content flex-start
            padding 0 0.37rem
            .artical-img-item
                display flex
                align-items center
                justify-content center
                width 2.8rem
                height 2.8rem
                overflow hidden
                border-radius 5px
                background #000
                img
                    width 100%
            .artical-img-item:nth-child(2)
                margin 0 0.16rem
        .artical-info-box
            display flex
            align-items center
            height 1.33rem
            .artical-info-item
                display flex
                align-items baseline
                justify-content center
                flex 1
                span
                    font-size 0.32rem
                    color #999
                img
                    width 0.4rem
                    margin-right 0.13rem
            .artical-info-item:last-child
                align-items center
        .comment-box
            border-top 1px solid #e5e5e5
            padding 0.32rem 0.37rem 0.37rem 0.37rem
            .comment-item
                line-height 1.5
                margin-bottom 0.4rem
                .user-name
                    font-weight bold
                    font-size 0.35rem
                    color #333
                .comment-detail
                    font-size 0.35rem
                    color #333
            .comment-item:last-child
                margin-bottom 0
        .comment-more
            padding 0 0.37rem
            font-size 0.35rem
            color #999
    .artical-item:last-child
        margin-bottom 0
.share-idea-box
    position absolute
    left 0
    right 0
    bottom 2rem
    display flex
    justify-content center
    .share-idea-btn
        height 1.05rem
</style>


